<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/css/main.css">
    <script src="/js/jquery-2.1.4.min.js"></script>

    <link rel="stylesheet" href="/css/commonNav.css">
    <style>
        .self {
            margin-top: 30px;
        }

        .self > li {
            height: 50px;
            line-height: 50px;
        }

    </style>
</head>
<body class="lay-blog">
<div th:include="/teacher/templates::header"></div>


<div class="container-wrap" id="userInfo">

    <div class="container" style="width: 1100px;" >
        <div class="main" style="">
            <div class="left-container " style="">
                <ul class="layui-nav layui-nav-tree left-nav"
                    style="background-color: white;color: black;"
                    lay-filter="test">
                    <li class="layui-nav-item active"><a href="/teacher/userInfo/index.html">基本信息</a></li>
                    <li class="layui-nav-item">
                        <a href="/teacher/userInfo/updatePwd.html">修改密码</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="/teacher/userInfo/updateMail.html">修改邮箱</a>
                    </li>
                </ul>
            </div>
            <div class="right-content" style="background-color: white; padding: 20px;">
                <div class="" v-if="show">
                    <div class="layui-row">
                        <div>
                            <h3 style="font-size: 20px;color: #3d3d3d;font-weight: bold">个人资料</h3>
                        </div>
                        <hr>
                        <div class="user-info" style="display: flex; flex-direction: row">
                            <div class="user-head" style="width: 100px;"  id="upload_head">
                                <img :src="user.image" style="width: 100px; height: 100px; border-radius: 50%" id="user_head"/>
                                <p style="text-align: center; margin-top: 10px;color:cornflowerblue;cursor:pointer;">
                                    <span>修改头像</span>
                                </p>
                            </div>
                            <div class="right-c" style="width:100%; padding: 20px;">
                                <div class="right-info">
                                    <span style="color: #999;">ID:{{user.loginName}}</span>
                                </div>
                                <hr>
                                <div class="nick">
                                    <span>昵称：{{user.username}}</span>
                                    <span style="float: right;">
                                        <a href="#" tyle="color: cornflowerblue;" @click="showEdit()">修改资料</a></span>
                                    <ul class="self" style="font-size: 14px;">
                                        <li>性别：{{user.gender}}</span></li>
                                        <li>生日：{{this.user.birthday}}</li>
                                        <li>学校：{{user.school.schoolName}}</li>
                                        <li>角色：{{user.role}}</li>
                                        <li>简介：{{user.intro}}</li>
                                    </ul>
                                </div>
                            </div>


                        </div>
                    </div>

                </div>
            </div>

            <div style="clear: both;"></div>
        </div>
    </div>


    <!--弹出层-->
    <div class="layui-row" id="edit_user_box"
         style="display:none; position: absolute; top: 0; left: 0; bottom: 0; right: 0; ">
        <div class="layui-col-md11">
            <div style="font-size: 14px; padding-top: 20px;">
                <form class="layui-form" lay-filter="userInfoForm">
                    <input name="id" type="hidden">
                    <div class="layui-form-item">
                        <label class="layui-form-label">昵称</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" required  lay-verify="required"
                                   placeholder="请输入昵称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <input type="radio" name="gender" value="男" title="男">
                            <input type="radio" name="gender" value="女" title="女" checked>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">出生日期</label>
                        <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                            <input type="text" name="birthday" class="layui-input" id="test1">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">学校</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <select name="province" lay-verify="" lay-filter="province">
                                <option v-for="p in province" :value="p.id">{{p.name}}</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width: 100px;">
                            <select name="city" lay-verify="" lay-filter="city">
                                <option v-for="c in city" :value="c.id">{{c.name}}</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width: 100px;">
                            <select name="area" lay-verify="" lay-filter="area">
                                <option v-for="c in area" :value="c.id">{{c.name}}</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width: 200px;">
                            <select name="school" lay-verify="" lay-filter="school">
                                <option v-for="s in schools" :value="s.id">{{s.schoolName}}</option>
                            </select>
                        </div>
                        <div class="layui-form-item layui-form-text" style="margin-top: 20px;">
                            <label class="layui-form-label">简介</label>
                            <div class="layui-input-block">
                                <textarea name="intro" placeholder="请输入简介" class="layui-textarea"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>



<div th:include="/teacher/templates::footer"></div>
<script src="/vue/vue.js"></script>


<script>
    const getLoginUserApi = api.getLoginUser;
    const getCityApi = api.getCity;
    const getSchoolsApi = api.getSchools;
    const getCityByAreaApi = api.getCityByArea;
    const updateUserApi = api.updateUser;


    UserVue = new Vue({
        el:'#userInfo',
        data: {
            user:{},
            show:false,
            province:[],
            city:[],
            area:[],
            schools:[]
        },
        async created () {
            var res = await getLoginUserApi();
            if(res.code == 0){
                this.user = res.data;
                this.user.role = this.user.role == 'ROLE_teacher'?'教师':'学生'
                if(this.user.image == ''){
                    this.user.image = '/images/fly.jpg'
                }
                this.show = true;
                uploadImg()
            }else{
                //  登陆
                window.location.href = "/login.html"
            }

        },
        methods:{
            showEdit(){
                this.initCity();
                this.dialog = layuiUtil.openDialog("修改信息",700,600,$('#edit_user_box'))
            },
            async initCity(){
                // 获取city
                var res = await getCityByAreaApi({areaId: this.user.school.countyId})
                this.user.school.cityId = res.data;

                var level1 = await getCityApi({level:1,parentId:1})
                this.province = level1.data;

                var level2 = await getCityApi({level:2,parentId:this.user.school.provinceId})
                this.city = level2.data;

                var level3 = await getCityApi({level:3,parentId:this.user.school.cityId})
                this.area = level3.data;

                var schools = await getSchoolsApi({countyId:this.user.school.countyId});
                this.schools = schools.data;

                window.setTimeout(()=>{
                    layui.use('form', async (form)=>{
                        //formTest 即 class="layui-form" 所在元素对应的 lay-filter="" 对应的值

                        form.val("userInfoForm", {
                            "username": this.user.username // "name": "value"
                            ,"gender": this.user.gender
                            ,"birthday": this.user.birthday
                            ,"intro": this.user.intro
                            ,"province": this.user.school.provinceId
                            ,"area": this.user.school.countyId
                            ,"city": this.user.school.cityId
                            ,"school": this.user.school.id
                            ,"id": this.user.id
                        })

                        form.on('select(province)', async (data) => {
                            this.provinceHandler(data.value)
                        });
                        form.on('select(city)', async (data) => {
                            this.cityHandler(data.value)
                        });
                        form.on('select(area)', async (data) => {
                            this.areaHandler(data.value)
                        });
                        form.render()
                    })
                },500);

            },
            async provinceHandler(id){
                console.log(id)
                // 加载二级、三级城市
                var level2 = await getCityApi({level:2,parentId:id});
                this.city = level2.data;
                var level3 = await getCityApi({level:3,parentId:this.city[0].id})
                this.area = level3.data;
                this.renderForm();
            },
            async cityHandler(id){
                console.log(id)
                // 加载三级城市
                var level3 = await getCityApi({level:3,parentId:id})
                this.area = level3.data;
                this.renderForm();
            },
            async areaHandler(id){
                var schools = await getSchoolsApi({countyId:id});
                this.schools = schools.data;
                this.renderForm();
            },
            renderForm(){
                window.setTimeout(()=>{
                    layui.use('form',(form)=>{
                        form.render()
                    });
                },200)
            },
            updatePage(){
                $.ajax({
                    url:'/api/user/loginUser',
                    type:'get',
                    success:(res)=>{
                        if(res.code == 0){
                            this.user = res.data;
                            this.user.role = this.user.role == 'ROLE_teacher'?'教师':'学生'
                            if(this.user.image == ''){
                                this.user.image = '/images/fly.jpg';
                            }
                        }else{
                            //  登陆
                            window.location.href = "/login.html"
                        }
                    }
                })
            }
        }
    })

    function uploadImg() {
        layui.use(['upload','laydate'], function () {
            var upload = layui.upload,laydate = layui.laydate;

            //执行实例
            var uploadInst = upload.render({
                elem: '#upload_head' //绑定元素
                , url: '/api/user/uploadHead' //上传接口
                , done: function (res) {
                    //上传完毕回调
                    $('.user-head img').attr('src', res.data.imgUrl)
                    layui.layer.msg('头像上传成功！', {icon: 1})
                }
                , error: function () {
                    //请求异常回调
                }
            });

            laydate.render({
                elem: '#test1' //指定元素
            });
        });
    }

    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', (data) =>{
            data = data.field;
            if(data.birthday){
                data.birthday = data.birthday.replace(/-/g, '/')
            }
            console.log(data)
            $.ajax({
                url:'/api/user/update',
                data:data,
                type:'put',
                success: (res)=>{
                    if (res.code == 0){
                        layuiUtil.msg.msgOk("修改成功")
                    }
                    window.setTimeout(()=>{
                        layer.closeAll()
                    },500);
                    // 更新信息
                    UserVue.updatePage()

                }
            })
            return false;
        });
        form.render();

    });

</script>
</body>
</html>